<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 语法糖：
         一、省略组件构造器Vue.extend()方法的步骤，因为比较复杂，改为直接在注册组件的时候，使用一个对象来代替
         二、模板的分离写法：就是把模板里面的html分离出来写，然后挂载到对应的组件上面，结构就会变得非常清晰
         Vue中提供了两种模板分离写法：
         1.使用script标签
         2.使用template标签(推荐使用)
    -->
    <div id="app">
        <!-- 1.2 使用全局组件 -->
        <max-cpn></max-cpn>

        <!-- 2.2 使用局部组件 -->
        <min-cpn></min-cpn>

        <!-- 3.3 使用全局组件 -->
        <test-cpn></test-cpn>

        <!-- 4.3 使用子组件 -->
        <one-cpn></one-cpn>
        

    </div>
    <script src="./vue.js"></script>

    <!-- 3.1 使用script标签创建组件模板 -->
    <script type="text-x/template" id="test">
        <div>
            <h2>组件标题</h2>
            <p>标题内容</p>
        </div>
    </script>


    <!-- 4.1  使用template标签创建组件模板-->
    <template id="one">
        <div>
            <h1>使用template标签创建组件模板</h1>
            <p>使用template标签创建组件模板使用template标签创建组件模板</p>
        </div>
    </template>

    <script>

        //1.1 注册全局组件 
        Vue.component("max-cpn",{
            template:`
            <div>
                <h1>全局组件</h1>
            </div>
            `
        })

        // 3.2 注册全局组件
        Vue.component("test-cpn",{
            template:"#test"
        })



        let app=new Vue({
            el:"#app",
            // 2.1 注册子组件
            components:{
                "min-cpn":{
                    template:`<li>西瓜</li>`
                },
                "one-cpn":{
                    template:"#one"
                }

            }
        })
    </script>
</body>
</html>